<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国家详情 - 地球贴</title>
    <link rel="stylesheet" href="./styles.css">
    <style>
        /* 国家详情页特有样式 */
        .flag-header {
            position: relative;
            height: 300px;
            overflow: hidden;
        }
        .flag-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.05);
            transition: transform var(--transition-slow);
        }
        .flag-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background: linear-gradient(to top, var(--color-bg), transparent);
        }
        .country-name-header {
            position: absolute;
            bottom: 24px;
            left: 24px;
            right: 24px;
            z-index: 10;
        }
        .country-name-main {
            font-size: 36px;
            font-weight: 800;
            color: white;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            margin-bottom: 4px;
            letter-spacing: -1px;
        }
        .country-region {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.9);
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(4px);
            padding: 4px 12px;
            border-radius: var(--radius-full);
            display: inline-block;
            font-weight: 500;
        }
        .header-actions {
            position: absolute;
            top: 16px;
            right: 16px;
            display: flex;
            gap: 12px;
            z-index: 20;
        }
        .back-button {
            position: absolute;
            top: 16px;
            left: 16px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: all var(--transition-normal);
            z-index: 20;
        }
        .back-button:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        }
        .action-button {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: all var(--transition-normal);
            font-size: 20px;
        }
        .action-button:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        }
        .action-button.favorite.active {
            color: var(--color-accent);
            animation: heartBeat 0.6s ease;
        }
        /* 内容区域 */
        .content-container {
            padding: 0 16px 70px;
            margin-top: -24px;
            position: relative;
        }
        /* 信息卡片 */
        .info-card {
            background-color: var(--color-card);
            border-radius: var(--radius-l);
            padding: 24px;
            box-shadow: var(--elev-2);
            margin-bottom: 20px;
            animation: fadeInUp 0.5s ease-out;
        }
        .info-card-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 16px;
            color: var(--color-fg);
            position: relative;
            padding-left: 12px;
        }
        .info-card-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 24px;
            background-color: var(--color-primary);
            border-radius: var(--radius-full);
        }
        .info-text {
            color: var(--color-fg);
            line-height: 1.8;
            font-size: 15px;
        }
        /* 地标区域 */
        .landmarks-section {
            background-color: var(--color-card);
            border-radius: var(--radius-l);
            padding: 24px;
            box-shadow: var(--elev-2);
            animation: fadeInUp 0.6s ease-out;
            animation-delay: 0.1s;
        }
        .landmarks-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--color-fg);
            position: relative;
            padding-left: 12px;
        }
        .landmarks-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 24px;
            background-color: var(--color-secondary);
            border-radius: var(--radius-full);
        }
        .landmarks-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        .landmark-card {
            background-color: var(--color-bg);
            border-radius: var(--radius-m);
            overflow: hidden;
            cursor: pointer;
            transition: all var(--transition-normal);
            box-shadow: var(--elev-1);
        }
        .landmark-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: var(--elev-3);
        }
        .landmark-media {
            height: 140px;
            overflow: hidden;
        }
        .landmark-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-slow);
        }
        .landmark-card:hover .landmark-media img {
            transform: scale(1.1);
        }
        .landmark-info {
            padding: 12px;
            text-align: center;
        }
        .landmark-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--color-fg);
            margin-bottom: 2px;
        }
        .landmark-desc {
            font-size: 12px;
            color: var(--color-muted);
        }
        /* 底部弹出模态（Bottom Sheet）增强版 */
        .sheet {
            position: fixed;
            inset: 0;
            display: none;
            z-index: 200;
            overflow: hidden;
        }
        .sheet.open {
            display: block;
        }
        .sheet-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity var(--transition-normal);
            backdrop-filter: blur(4px);
        }
        .sheet.open .sheet-backdrop {
            opacity: 1;
        }
        .sheet-panel {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--color-card);
            border-radius: var(--radius-l) var(--radius-l) 0 0;
            box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
            transform: translateY(100%);
            transition: transform var(--transition-normal);
            max-height: 80vh;
            overflow-y: auto;
        }
        .sheet.open .sheet-panel {
            transform: translateY(0);
        }
        .sheet-header {
            padding: 16px 20px 12px;
            display: flex;
            justify-content: center;
            position: relative;
        }
        .sheet-handle {
            width: 50px;
            height: 5px;
            background: var(--color-border);
            border-radius: var(--radius-full);
            transition: all var(--transition-normal);
        }
        .sheet.open .sheet-handle {
            background: var(--color-primary);
        }
        .sheet-close-top {
            position: absolute;
            right: 16px;
            top: 12px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--color-bg);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-normal);
        }
        .sheet-close-top:hover {
            background: var(--color-primary-weak);
            color: var(--color-primary);
        }
        .sheet-content {
            padding: 0 20px 30px;
        }
        .sheet-media {
            margin-bottom: 20px;
            border-radius: var(--radius-m);
            overflow: hidden;
            box-shadow: var(--elev-2);
        }
        .sheet-media img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .sheet-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--color-fg);
        }
        .sheet-desc {
            font-size: 15px;
            color: var(--color-fg);
            line-height: 1.7;
            margin-bottom: 20px;
        }
        .sheet-actions {
            display: flex;
            gap: 12px;
        }
        .sheet-button {
            flex: 1;
            padding: 14px;
            border-radius: var(--radius-m);
            border: none;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-normal);
            text-align: center;
        }
        .sheet-button.primary {
            background-color: var(--color-primary);
            color: white;
        }
        .sheet-button.primary:hover {
            background-color: var(--color-primary-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        .sheet-button.secondary {
            background-color: var(--color-bg);
            color: var(--color-fg);
            border: 1px solid var(--color-border);
        }
        .sheet-button.secondary:hover {
            background-color: var(--color-border);
        }
        /* 响应式设计 */
        @media (min-width: 768px) {
            .flag-header {
                height: 400px;
            }
            .content-container {
                padding: 0 32px 70px;
                max-width: 1000px;
                margin: -32px auto 0;
            }
            .landmarks-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
            .landmark-media {
                height: 160px;
            }
            .sheet-media img {
                height: 300px;
            }
        }
    </style>
</head>
<body>
    <!-- 国旗头部区域 -->
    <div class="flag-header">
        <img src="https://picsum.photos/id/1000/1200/800" alt="美国国旗" class="flag-image" />
        <div class="flag-overlay"></div>
        
        <!-- 返回按钮 -->
        <button class="back-button" onclick="window.history.back()">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 操作按钮 -->
        <div class="header-actions">
            <button class="action-button share">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <polyline points="16 6 12 2 8 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <line x1="12" y1="2" x2="12" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
            <button class="action-button favorite">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
        
        <!-- 国家名称头部 -->
        <div class="country-name-header">
            <div class="country-region">北美洲</div>
            <h1 class="country-name-main">美国</h1>
        </div>
    </div>

    <!-- 内容容器 -->
    <div class="content-container">
        <!-- 国家介绍卡片 -->
        <div class="info-card">
            <h2 class="info-card-title">国家简介</h2>
            <p class="info-text">
                美利坚合众国（United States of America），简称美国，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.33亿，通用英语，是一个移民国家。
            </p>
            <p class="info-text" style="margin-top: 12px;">
                美国原为印第安人的聚居地，15世纪末，西班牙、荷兰、法国、英国等相继移民至此。18世纪前，英国在美国大西洋沿岸建立了13个英属北美殖民地。1775年，爆发了美国人民反抗大英帝国殖民统治的独立战争。1776年7月4日，在费城召开了第二次大陆会议，由乔治·华盛顿任大陆军总司令，发表《独立宣言》，宣布美利坚合众国正式成立。1783年独立战争结束，英国承认13个殖民地独立。1787年通过美国宪法，成立联邦制国家。
            </p>
        </div>

        <!-- 文化地标区域 -->
        <div class="landmarks-section">
            <h2 class="landmarks-title">文化地标</h2>
            <div class="landmarks-grid">
                <div class="landmark-card" onclick="openSheet('自由女神像', 'https://picsum.photos/id/1015/800/500', '自由女神像是位于美国纽约港自由岛的一个巨大的新古典主义雕塑。这座铜像是法国送给美国的礼物，于1886年10月28日揭幕。自由女神像是自由的象征，也是美国的标志性地标之一。')">
                    <div class="landmark-media">
                        <img src="https://picsum.photos/id/1015/400/300" alt="自由女神像" />
                    </div>
                    <div class="landmark-info">
                        <h3 class="landmark-name">自由女神像</h3>
                        <p class="landmark-desc">纽约</p>
                    </div>
                </div>
                <div class="landmark-card" onclick="openSheet('大峡谷', 'https://picsum.photos/id/1018/800/500', '大峡谷是位于美国亚利桑那州的一个巨大峡谷，由科罗拉多河经过数百万年的侵蚀形成。大峡谷是世界七大自然奇观之一，以其壮观的景色和独特的地质构造而闻名。')">
                    <div class="landmark-media">
                        <img src="https://picsum.photos/id/1018/400/300" alt="大峡谷" />
                    </div>
                    <div class="landmark-info">
                        <h3 class="landmark-name">大峡谷</h3>
                        <p class="landmark-desc">亚利桑那州</p>
                    </div>
                </div>
                <div class="landmark-card" onclick="openSheet('金门大桥', 'https://picsum.photos/id/1019/800/500', '金门大桥是一座位于美国加利福尼亚州旧金山湾区的悬索桥，连接旧金山和马林县。这座桥于1937年建成，是世界上最著名的桥梁之一，也是旧金山的标志性建筑。')">
                    <div class="landmark-media">
                        <img src="https://picsum.photos/id/1019/400/300" alt="金门大桥" />
                    </div>
                    <div class="landmark-info">
                        <h3 class="landmark-name">金门大桥</h3>
                        <p class="landmark-desc">旧金山</p>
                    </div>
                </div>
                <div class="landmark-card" onclick="openSheet('黄石国家公园', 'https://picsum.photos/id/1036/800/500', '黄石国家公园是世界上第一个国家公园，成立于1872年。它位于美国怀俄明州、蒙大拿州和爱达荷州的交界处，以其地热景观、野生动物和壮观的自然景色而闻名。')">
                    <div class="landmark-media">
                        <img src="https://picsum.photos/id/1036/400/300" alt="黄石国家公园" />
                    </div>
                    <div class="landmark-info">
                        <h3 class="landmark-name">黄石国家公园</h3>
                        <p class="landmark-desc">怀俄明州</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-nav">
        <a href="index.html" class="bottom-item">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>发现</span>
        </a>
        <a href="favorites.html" class="bottom-item active">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>收藏</span>
        </a>
        <a href="profile.html" class="bottom-item">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>我的</span>
        </a>
    </div>

    <!-- 底部弹出模态（增强版 Bottom Sheet） -->
    <div id="bottomSheet" class="sheet">
        <div class="sheet-backdrop" onclick="closeSheet()"></div>
        <div class="sheet-panel">
            <div class="sheet-header">
                <div class="sheet-handle"></div>
                <button class="sheet-close-top" onclick="closeSheet()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
            <div class="sheet-content">
                <div class="sheet-media">
                    <img id="sheetImage" src="" alt="详情图片" />
                </div>
                <h3 id="sheetTitle" class="sheet-title"></h3>
                <p id="sheetDesc" class="sheet-desc"></p>
                <div class="sheet-actions">
                    <button class="sheet-button primary">保存到收藏</button>
                    <button class="sheet-button secondary">分享</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 打开底部弹出模态
        function openSheet(title, image, desc) {
            document.getElementById('sheetTitle').textContent = title;
            document.getElementById('sheetImage').src = image;
            document.getElementById('sheetDesc').textContent = desc;
            document.getElementById('bottomSheet').classList.add('open');
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }
        
        // 关闭底部弹出模态
        function closeSheet() {
            document.getElementById('bottomSheet').classList.remove('open');
            document.body.style.overflow = ''; // 恢复滚动
        }
        
        // 收藏功能
        document.querySelector('.action-button.favorite').addEventListener('click', function() {
            this.classList.toggle('active');
        });
        
        // 添加动画效果
        document.addEventListener('DOMContentLoaded', function() {
            // 页面加载时的动画
            setTimeout(() => {
                document.querySelector('.flag-image').style.transform = 'scale(1)';
            }, 100);
        });
    </script>
</body>
</html>

